<script setup>
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "../util/utils.js";
import {doGet} from "../http/httpRequest.js";

//定义router对象，该对象中提供了一些路由方法供我们使用，比如router.push(), router.go()
let router = useRouter();
//定义route对象，该对象提供了一些路由属性/字段供我们使用，比如route.path;  route.params; 等等
let route = useRoute();

//定义用户详情对象
let userInfo = ref({
  createByDO : {},
  editByDO : {}
})

//返回
const goBack = () => {
  router.back();
}

//页面dom元素渲染后触发执行
onMounted(() => {
  let id = route.params.userId // userId参数要和router.js文件中配置的动态路由userId名称要相同
  //加载用户详情信息
  loadUserDetail(id);
})

//加载用户详情信息
const loadUserDetail = (id) => {
  doGet('/api/user/' + id, {}).then(resp => {
    if (resp.data.code === 200) {
      userInfo.value = resp.data.data;
      if (!resp.data.data.createByDO) {
        //避免后端没有查询到createByDO创建人，前端读name字段的时候报null的错误
        userInfo.value.createByDO = {}
      }
      if (!resp.data.data.editByDO) {
        //避免后端没有查询到editByDO编辑人，前端读name字段的时候报null的错误
        userInfo.value.editByDO = {}
      }
    } else {
      //提示一下
      showMessage('数据加载失败', 'error');
    }
  })
}
</script>

<template>
  <el-form
      :model="userInfo"
      label-width="auto">
    <el-form-item label="ID">
      <div class="divInfo">&nbsp;{{userInfo.id}}</div>
    </el-form-item>
    <el-form-item label="账号">
      <div class="divInfo">&nbsp;{{userInfo.loginAct}}</div>
    </el-form-item>
    <el-form-item label="密码">
      <div class="divInfo">******</div>
    </el-form-item>
    <el-form-item label="姓名">
      <div class="divInfo">&nbsp;{{userInfo.name}}</div>
    </el-form-item>
    <el-form-item label="手机">
      <div class="divInfo">&nbsp;{{userInfo.phone}}</div>
    </el-form-item>
    <el-form-item label="邮箱">
      <div class="divInfo">&nbsp;{{userInfo.email}}</div>
    </el-form-item>
    <el-form-item label="账号是否未过期">
      <div class="divInfo">&nbsp;{{userInfo.accountNoExpired === 1 ? '是' : '否'}}</div>
    </el-form-item>
    <el-form-item label="密码是否未过期">
      <div class="divInfo">&nbsp;{{userInfo.credentialsNoExpired === 1 ? '是' : '否'}}</div>
    </el-form-item>
    <el-form-item label="账号是否未锁定">
      <div class="divInfo">&nbsp;{{userInfo.accountNoLocked === 1 ? '是' : '否'}}</div>
    </el-form-item>
    <el-form-item label="账号是否已经开启">
      <div class="divInfo">&nbsp;{{userInfo.accountEnabled === 1 ? '是' : '否'}}</div>
    </el-form-item>
    <el-form-item label="创建时间">
      <div class="divInfo">&nbsp;{{userInfo.createTime}}</div>
    </el-form-item>
    <el-form-item label="创建人">
      <div class="divInfo">&nbsp;{{userInfo.createByDO.name}}</div>
    </el-form-item>
    <el-form-item label="编辑时间">
      <div class="divInfo">&nbsp;{{userInfo.editTime}}</div>
    </el-form-item>
    <el-form-item label="编辑人">
      <div class="divInfo">&nbsp;{{userInfo.editByDO.name}}</div>
    </el-form-item>
    <el-form-item label="最近登录时间">
      <div class="divInfo">&nbsp;{{userInfo.lastLoginTime}}</div>
    </el-form-item>
  </el-form>
  <div style="text-align: center;" >
    <el-button type="success" plain @click="goBack">返 回</el-button>
  </div>
</template>

<style scoped>
.divInfo {
  background: azure;
  width: 100%;
  margin-left: 10px;
  padding-left: 10px;
}
</style>